<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">{{fullname}}</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <el-button type="primary" size="mini" round @click="changename">好耶！</el-button>
    <router-view/>  
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'Home'
    }
  },
  created() {
    console.log(process.env)
    class Example {
      constructor(a, b) {
          this.a = a;
          this.b = b;
          console.log('Example');
          this.happy = function() {  
            return "i'm happy !"
          }
      }
      sum() {
          return this.a + this.b || 1;
      }
    }
    let exam1 = new Example(2, 1);
    let exam2 = new Example(3, 1);
    console.log(exam1.__proto__ == exam2.__proto__); // true
    
    exam1.__proto__.sub = function() {
        return this.a - this.b;
    }
    console.log(exam1.sub(),exam1.sum(),exam1.happy()); // 1
    console.log(exam2.sub(),exam2.sum(),exam2.happy()); // 2
  },
  methods: {
    changename(){
      this.name = 'Happy'
    }
  },
  computed: {
    fullname:{
      get: function(){
        return this.name
      },
      set: function(newval){
        console.log(newval)
        // this.name = '好耶！'
      }
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a div {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
